<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>clock</title>

</head>
<style>
	#btnStart, #btnStop {
		width:40px;
		height: 30px;
		border:1px solid yellow;
		border-radius: 10px;
		background-color: #F29661;
		color: white;
		font-weight: bolder;
		padding:2px;
	}
	#ymd, #hms {
		text-align: right;
	}
</style>
<script>
	window.onload = function(){
		var start = document.getElementById("btnStart");
		var stop = document.getElementById("btnStop");
		
		start.onclick = function(){
			obj = setInterval(setClock, 100);
		}
		stop.onclick = function(){
			clearInterval(obj);
		}
	}
	function setClock(){
		var y = document.getElementById("ymd");
		var time = document.getElementById("hms");
		
		var now = new Date();
		y.value = now.getFullYear() + "년";
		y.value += (now.getMonth() + 1) + "월";
		y.value += (now.getDate()) + "일";
		
		time.value = now.getHours() + "시";
		time.value += now.getMinutes() + "분";
		time.value += now.getSeconds() + "초";
		
	}
</script>
<body>
  <input type="text" id="ymd" readonly="readonly" /><br/>
  <input type="text" id="hms" readonly="readonly" /><p/>
  <input type="button" value="시작" id="btnStart" />
  <input type="button" value="종료" id="btnStop" /><p/>
  <iframe width="560" height="315" src="//www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe>
</body>
</html>
